<template>
	<view>
		<u-card :show-head="false" padding="30" margin="20rpx" :foot-border-top="false">
			<view class="card-body" slot="body">
				<u-form :model="form" ref="uForm" label-width="200">
					<view class="title">
						签收
					</view>
					<u-form-item label="签收数量:" :border-bottom="false">
						<u-input v-model="form.num" border />
					</u-form-item>
					<u-form-item label="签收单上传:" :border-bottom="false" prop="signPic">
					</u-form-item>
					<u-upload :before-upload="beforeUpload" :http-request="httpRequest" @on-success="onSuccess"
						@on-remove="onRemove"></u-upload>
					<u-form-item label="交付检查表上传:" :border-bottom="false" prop="overPic">
					</u-form-item>
					<u-upload :before-upload="beforeUpload" :http-request="httpRequest" @on-success="overPicOnSuccess"
						@on-remove="overPicOnRemove"></u-upload>
					<u-form-item label="备注:" :border-bottom="false">
						<u-input v-model="form.remark" border />
					</u-form-item>
				</u-form>
			</view>
			<view class="u-footer" slot="foot">
				<view></view>
				<u-button type="primary" size="medium" @click="submit">提交</u-button>
			</view>
		</u-card>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					num: "", //签收数量
					remark: "", //备注
					signPic: "", //签收单上传
					overPic: "", //交付检查表上传
					parentId: ""
				},
				signPicList: [], //签收单图片列表
				overPicList: [], //交付检查表图片列表
				rules: {
					num: [{
						required: true,
						message: '请输入签收数量',
						trigger: 'blur'
					}],
					signPic: [{
						required: true,
						message: '请上传签收单',
						trigger: 'blur,change'
					}],
					overPic: [{
						required: true,
						message: '请上传交付检查表',
						trigger: 'blur,change'
					}],
				},
			}
		},
		onLoad(option) {
			this.form = {
				num: "", //签收数量
				remark: "", //备注
				signPic: "", //签收单上传
				overPic: "", //交付检查表上传
				parentId: ""
			}
			this.signPicList = []
			this.overPicList = []
			if (option) {
				this.form.parentId = option.id
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {},
		methods: {
			async beforeUpload(index, list) {
				return true
				this.$u.api.common.uploadFile({
					file: list[0].url
				}).then(res => {}).catch(err => {})
			},
			httpRequest(data) {
				this.$u.api.common.uploadFile(data.file.url, {
					getTask: (task, config) => {
						task.onProgressUpdate(res => {
							data.progress(res)
						})
					}
				}).then(res => {
					data.success(res);
				}).catch(err => {
					data.error(err);
				})
			},
			onSuccess(data, index, lists, name) {
				if (data.code === 200 && data.success) {
					this.signPicList.push(data.data.link)
				}
				this.form.signPic = this.signPicList.join(';')
			},
			onRemove(index, lists, name) {
				this.signPicList.splice(index, 1)
				this.form.signPic = this.signPicList.join(';')
			},
			overPicOnSuccess(data, index, lists, name) {
				if (data.code === 200 && data.success) {
					this.overPicList.push(data.data.link)
				}
				this.form.overPic = this.overPicList.join(';')
			},
			overPicOnRemove(index, lists, name) {
				this.overPicList.splice(index, 1)
				this.form.overPic = this.overPicList.join(';')
			},
			//提交
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading()
						this.$u.api.carrier.signForReceipt({
							...this.form
						}).then(data => {
							uni.hideLoading()
							if (data.code === 200 && data.success) {
								this.$refs.uToast.show({
									title: data.msg,
									type: 'success',
									duration: 1000
								})
								setTimeout(() => {
									this.back()
								}, 1000)
							}
						}).catch(() => {
							uni.hideLoading()
						})
					}
				});
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less">
	.card-body {
		.u-form-item {
			padding: 20rpx !important;
		}

		.materials-title {
			color: #333333;
			font-size: 38rpx;
			line-height: 1.5;
			font-weight: 500;
			padding: 20rpx 0;
			width: 610rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #f2f3f6;
		}

		.title {
			color: #333333;
			font-size: 38rpx;
			font-weight: 500;
			padding: 30rpx 20rpx;
			width: 100%;
			border-bottom: 2rpx solid #f2f3f6;
		}
	}

	.u-footer {
		display: flex;
		justify-content: space-between;
	}
</style>
